<div id="contenedor" class="container">  
    <div class="row-fluid">
        <div class="row-fluid">
            <ul  class="span12 breadcrumb alingCenter">
                <li><b>Clientes</b></li>
            </ul>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">
            <div class="row-fluid">
                <ul id="headBusquedaClientes" class="span12 breadcrumb alingCenter">
                    <li><b>Busqueda de clientes</b></li>
                </ul>
            </div>
            <div class="row-fluid">
                <form id="formularioBusquedaClientes">  
                    <div class="row-fluid">
                        <div class="span4">
                            Nombre
                        </div>
                        <div class="span7">
                            <input type="text" id="buscar-nombre" class="span12 search" >
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4">
                            Apellido
                        </div>
                        <div class="span7">
                            <input type="text" id="buscar-apellido" class="span12 search" >
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4">
                            Nacionalidad
                        </div>
                        <div class="span7">
                            <select  id="buscar-nacionalidad" class="span12 search-cambiar" >
                                <option></option>
                                <?php foreach ($paises as $pais) { ?>
                                    <option value="<?php echo $pais->id_pais ?>"><?php echo $pais->nombre ?></option>
                                <?php } ?> 


                            </select>
                        </div>
                    </div>

                    <div class="row-fluid">
                        <hr>
                        <div class="span12"> <b>Por fecha de nacimiento</b>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4">
                            Desde
                        </div>
                        <div class="span7">
                            <div class="input-prepend">
                                <span class="add-on"><i class="icon-calendar"></i></span>
                                <input type="text" id="buscar-nacimiento1" class="datePicker input-small search-cambiar"> 
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4">
                            Hasta
                        </div>
                        <div class="span7">
                            <div class="input-prepend">
                                <span class="add-on"><i class="icon-calendar"></i></span>
                                <input type="text" id="buscar-nacimiento2" class="datePicker input-small search-cambiar"> 
                            </div>
                        </div>

                    </div>


                    <div class="row-fluid hide">
                        <hr>
                        <div class="span6 offset3">
                            <button type="button" id="btn-buscar" class="btn btn-inverse">Buscar</button>
                        </div>
                    </div>




                </form>
            </div>
        </div>
        <div class="span8">
            <div class="row-fluid">
                <ul  class="span12 breadcrumb alingCenter">
                    <li><b>Resultados</b></li>
                </ul>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <a href="#modalAgregarCliente" class="btn btn-primary" type="button" data-toggle="modal"> Nuevo Cliente</a>
                    <button type="button" class="btn btn-success">Exportar</button>   

                </div>   

                <div class="row-fluid">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Teléfono</th>
                                <th>Correo</th>
                                <th>Nacionalidad</th>
                                <th>Historial</th>
                            </tr>
                        </thead>
                        <tbody id="lista-clientes" data-pagina="1">


                        </tbody>
                    </table>
                </div>
                <div class="row-fluid">
                    <div class="pagination pull-right" id="pagination">
                        <!--                        <ul>
                                                    <li class="active">
                                                        <a href="#">1</a>
                                                    </li>
                                                    <li><a href="#">2</a></li>
                                                    <li><a href="#">3</a></li>
                                                    <li><a href="#">4</a></li>
                                                    <li><a href="#">Siguiente</a></li>
                                                </ul>-->
                    </div>
                </div>
            </div>
        </div>
    </div>  

</div>

<!--  I   N   S   E   R  C  I   O  N-->

<div id="modalAgregarCliente" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="alingCenter" >Ingresar Nuevo Cliente</h4>

    </div>
    <div class="modal-body">
        <div class="row-fluid">
            <div class="span12" id="tipos-cliente">
                <div class="span8 offset4">
                    <button type="button" id="btn-persona" class="btn  btn-inverse">Persona</button>    
                    <button type="button" id="btn-empresa" class="btn  btn-inverse">Empresa</button>  
                </div>                   
            </div>  

        </div> 
        <div id="div-personas">
            <form id="form-personas" action="clientes/nuevoClientePersona" method="post">
                <input type="hidden" name="tipo-cliente" value="1">                    
                <div class="row-fluid">                    
                    <div class="span12">

                        <div class="row-fluid">
                            <h5 class="alingCenter">Persona</h5>                                    
                        </div>    
                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Tipo de documento:</label>
                            </div>
                            <div class="span7">
                                <select name="tipo-documento" >
                                    <?php foreach ($documentos as $documento) { ?> 
                                        <option value="<?php echo $documento->id_documento ?>"><?php echo $documento->nombre ?></option>
                                    <?php } ?>
                                </select>    
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Documento:</label>
                            </div>
                            <div class="span7">
                                <input type="text"  name="documento" required>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Nombre:</label>
                            </div>
                            <div class="span7">
                                <input  type="text" name="nombre" required>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Apellido:</label>
                            </div>
                            <div class="span7">
                                <input  type="text" name="apellido" required>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Género:</label>
                            </div>
                            <div class="span7">
                                <select  name="genero">
                                    <option>Masculino</option>
                                    <option>Femenino</option>
                                </select>   
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Fecha de nacimiento:</label>
                            </div>
                            <div class="span7">
                                <div class="input-prepend">
                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                    <input type="text"  name="fecha-nacimiento" class="datePicker input-small"> 
                                </div>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Teléfono:</label>
                            </div>
                            <div class="span7">
                                <input type="text"  name="telefono" required>
                            </div>
                        </div>   

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Nacionalidad:</label>
                            </div>
                            <div class="span7">
                                <select name="nacionalidad">
                                    <option></option>
                                    <?php foreach ($paises as $pais) { ?>
                                        <option value="<?php echo $pais->id_pais ?>"><?php echo $pais->nombre ?></option>
                                    <?php } ?>                                        
                                </select>    
                            </div>
                        </div>


                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">E-mail:</label>
                            </div>
                            <div class="span7">
                                <input  type="email" name="e-mail" required>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Ocupación:</label>
                            </div>
                            <div class="span7">
                                <input  type="text" name="ocupacion" required>
                            </div>
                        </div>


                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Estado civíl:</label>
                            </div>
                            <div class="span7">
                                <select name="estado-civil" required>
                                    <?php foreach ($estados_civiles as $estado) { ?> 
                                        <option value="<?php echo $estado->id_estado_civil; ?>"><?php echo $estado->nombre; ?></option>
                                    <?php } ?>
                                </select>   
                            </div>
                        </div>

                    </div>


                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-inverse" id="persona-submit">Agregar</button>
                </div>
            </form>
        </div>  

        <div id="div-empresas" class="hide">
            <form action="clientes/nuevoClienteEmpresa" method="post">
                <input type="hidden" name="tipo-cliente" value="2">
                <div class="row-fluid">                    
                    <div class="span12">                            
                        <div class="row-fluid">
                            <h5 class="alingCenter">Empresa</h5>                                    
                        </div>   


                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Código:</label>
                            </div>
                            <div class="span7">
                                <input type="text" name="documento" required>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Nombre:</label>
                            </div>
                            <div class="span7">
                                <input type="text" name="nombre" required>
                            </div>
                        </div>



                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Teléfono:</label>
                            </div>
                            <div class="span7">
                                <input type="text" name="telefono" required>
                            </div>
                        </div>   

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">País:</label>
                            </div>
                            <div class="span7">
                                <select name="nacionalidad">
                                    <?php foreach ($paises as $pais) { ?> 
                                        <option value="<?php echo $pais->id_pais; ?>"><?php echo $pais->nombre; ?></option>
                                    <?php } ?>
                                </select>    
                            </div>
                        </div>


                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">E-mail:</label>
                            </div>
                            <div class="span7">
                                <input type="email" name="e-mail" required>
                            </div>
                        </div>

                    </div>


                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-inverse">Agregar</button>
                </div>
            </form> 

        </div>    


    </div>


</div>










<!-- E   D   I   C   I    O    N-->


<!-- P E R S O N A -->

<div id="modalEditarClientePersona" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="alingCenter" id="titulo-cliente">Editar Cliente</h4>

    </div>
    <div class="modal-body">          
        <div id="div-personas-edicion">
            <form id="form-personas" action="clientes/editarClientePersona" method="post">
                <input type="hidden" name="tipo-cliente" value="1">      
                <input type="hidden" id="persona-id" name="id-cliente" >
                <div class="row-fluid">                    
                    <div class="span12">

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Tipo de documento:</label>
                            </div>
                            <div class="span7">
                                <select id="persona-tipo-documento" name="tipo-documento" >
                                    <?php foreach ($documentos as $documento) { ?> 
                                        <option value="<?php echo $documento->id_documento ?>"><?php echo $documento->nombre ?></option>
                                    <?php } ?>
                                </select>    
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Documento:</label>
                            </div>
                            <div class="span7">
                                <input type="text" id="persona-documento" name="documento" required>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Nombre:</label>
                            </div>
                            <div class="span7">
                                <input id="persona-nombre" type="text" name="nombre" required>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Apellido:</label>
                            </div>
                            <div class="span7">
                                <input id="persona-apellido" type="text" name="apellido" required>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Género:</label>
                            </div>
                            <div class="span7">
                                <select id="persona-genero" name="genero">
                                    <option>Masculino</option>
                                    <option>Femenino</option>
                                </select>   
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Fecha de nacimiento:</label>
                            </div>
                            <div class="span7">
                                <div class="input-prepend">
                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                    <input type="text" id="persona-nacimiento" name="fecha-nacimiento" class="datePicker input-small"> 
                                </div>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Teléfono:</label>
                            </div>
                            <div class="span7">
                                <input type="text" id="persona-telefono" name="telefono" required>
                            </div>
                        </div>   

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Nacionalidad:</label>
                            </div>
                            <div class="span7">
                                <select id="persona-nacionalidad" name="nacionalidad">
                                    <option></option>
                                    <?php foreach ($paises as $pais) { ?>
                                        <option value="<?php echo $pais->id_pais ?>"><?php echo $pais->nombre ?></option>
                                    <?php } ?>                                        
                                </select>    
                            </div>
                        </div>


                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">E-mail:</label>
                            </div>
                            <div class="span7">
                                <input id="persona-email" type="email" name="e-mail" required>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Ocupación:</label>
                            </div>
                            <div class="span7">
                                <input id="persona-ocupacion" type="text" name="ocupacion" required>
                            </div>
                        </div>


                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Estado civíl:</label>
                            </div>
                            <div class="span7">
                                <select id="persona-estado-civil" name="estado-civil" required>
                                    <?php foreach ($estados_civiles as $estado) { ?> 
                                        <option value="<?php echo $estado->id_estado_civil; ?>"><?php echo $estado->nombre; ?></option>
                                    <?php } ?>
                                </select>   
                            </div>
                        </div>

                    </div>


                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-inverse" id="persona-submit">Actualizar</button>
                </div>
            </form>
        </div>  

        <div id="div-empresas-edicion" class="hide">
            <form action="clientes/editarClienteEmpresa" method="post">
                <input type="hidden" name="tipo" value="2">
                <input type="hidden" id="empresa-id" name="id-cliente" >
                <div class="row-fluid">                    
                    <div class="span12">                            
                        <div class="row-fluid">
                            <h5 class="alingCenter">Empresa</h5>                                    
                        </div>   


                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Código:</label>
                            </div>
                            <div class="span7">
                                <input id="empresa-documento" type="text" name="documento" required>
                            </div>
                        </div>

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Nombre:</label>
                            </div>
                            <div class="span7">
                                <input id="empresa-nombre" type="text" name="nombre" required>
                            </div>
                        </div>



                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">Teléfono:</label>
                            </div>
                            <div class="span7">
                                <input id="empresa-telefono" type="text" name="telefono" required>
                            </div>
                        </div>   

                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">País:</label>
                            </div>
                            <div class="span7">
                                <select id="empresa-nacionalidad" name="nacionalidad">
                                    <?php foreach ($paises as $pais) { ?> 
                                        <option value="<?php echo $pais->id_pais; ?>"><?php echo $pais->nombre; ?></option>
                                    <?php } ?>
                                </select>    
                            </div>
                        </div>


                        <div class="row-fluid"> 
                            <div class="span5">
                                <label class="pull-right">E-mail:</label>
                            </div>
                            <div class="span7">
                                <input id="empresa-email" type="text" name="e-mail" required>
                            </div>
                        </div>

                    </div>


                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-inverse">Actualizar</button>
                </div>
            </form> 

        </div>    


    </div>


</div>
